<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div>
    <div class="d-inline-block">
      <v-btn color="info" @click="newSubItem">新建项目</v-btn>
      <v-btn color="info" @click="up">上移</v-btn>
      <v-btn color="info" @click="down">下移</v-btn>
    </div>
    <v-data-table :headers="table.headers" :items="table.item" class="elevation-1">
      <template v-slot:items="props">
        <td><v-checkbox v-model="props.item.selected" primary hide-details @change="checkBoxChange(props.item.order, props.item.selected)"></v-checkbox></td>
        <td><v-icon small class="mr-2" @click="edit(props.index)">edit</v-icon><v-icon small class="mr-2" @click="deleteDialog.visible=true;deleteDialog.id=props.item.id">delete</v-icon></td>
        <td>{{ props.item.order }}</td>
        <td>{{ props.item.title }}</td>
        <td>{{ props.item.trainTime }}秒</td>
        <td>{{ props.item.introduction }}</td>
        <td>{{ props.item.detailInfo }}</td>
      </template>
    </v-data-table>
    <sub-dialog ref="subDialog" @update="update" :courseId="courseId"/>
    <v-dialog v-model="deleteDialog.visible" max-width="768">
      <v-card>
        <v-card-title class="headline">警告</v-card-title>
        <v-card-text>是否删除该项？</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="info" flat @click="deleteDialog.visible=false">取消</v-btn>
          <v-btn color="warning" flat @click="deleteItem(deleteDialog.id)">确定</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
import subDialog from './SubDialog'
import { deleteCourseItem, getCourseItem } from '../../api/course'
export default {
  name: 'SubTable',
  components: {
    subDialog
  },
  props: {
    courseId: {}
  },
  data: () => ({
    table: {
      selected: '',
      headers: [
        { text: '', sortable: false, value: '', align: 'center' },
        { text: '操作', sortable: false, value: 'action', align: 'center' },
        { text: '序号', sortable: false, value: 'order', align: 'center' },
        { text: '项目名称', sortable: false, value: 'name', align: 'center' },
        { text: '训练时间', sortable: false, value: 'trainTime', align: 'center' },
        { text: '介绍', sortable: false, value: 'introduction', align: 'center' },
        { text: '详细步骤', sortable: false, value: 'detailInfo', align: 'center' }
      ],
      item: [
        /*
        {
          order: 1,
          name: '256666',
          introduction: '介绍速度',
          selected: false
        },
        {
          order: 2,
          name: '88744',
          introduction: '介绍深度',
          selected: false
        } */
      ]
    },
    dialog: {
      visible: false,
      isEdit: false
    },
    deleteDialog: {
      id: '',
      visible: false
    }
  }),
  methods: {
    checkBoxChange (order, bool) {
      if (bool) {
        this.table.selected = order - 1
        for (let i = 0; i < this.table.item.length; i++) {
          if (i !== this.table.selected) {
            this.table.item[i].selected = false
          }
        }
      } else {
        this.table.selected = ''
        this.table.item[order - 1].selected = false
      }
    },
    up () {
      if (this.table.selected === '') {
        return
      } else if (this.table.selected === 0) {
        return
      }
      let temp = this.table.item[this.table.selected]
      temp.order--
      this.table.item[this.table.selected] = this.table.item[this.table.selected - 1]
      this.table.item[this.table.selected].order++
      this.table.item[this.table.selected - 1] = temp
      this.table.item.push({})
      this.table.item.pop()
      this.table.selected--
    },
    down () {
      if (this.table.selected === '') {
        return
      } else if (this.table.selected === this.table.item.length - 1) {
        return
      }
      let temp = this.table.item[this.table.selected]
      temp.order++
      this.table.item[this.table.selected] = this.table.item[this.table.selected + 1]
      this.table.item[this.table.selected].order--
      this.table.item[this.table.selected + 1] = temp
      this.table.item.push({})
      this.table.item.pop()
      this.table.selected++
    },
    edit (index) {
      this.$refs.subDialog.show()
      let data = {
        id: this.table.item[index].id,
        title: this.table.item[index].title,
        trainTime: this.table.item[index].trainTime,
        introduction: this.table.item[index].introduction,
        detailInfo: this.table.item[index].detailInfo,
        picUrl: this.table.item[index].picUrl
      }
      this.$refs.subDialog.get(data)
    },
    update () {
      getCourseItem(this.courseId).then((res) => {
        this.table.item = res.data.data
        for (let i = 0; i < this.table.item.length; i++) {
          this.table.item[i].order = i + 1
        }
      })
    },
    deleteItem (id) {
      deleteCourseItem(id, this.courseId).then((res) => {
        this.update()
        this.deleteDialog.visible = false
      })
    },
    newSubItem () {
      this.$refs.subDialog.show()
      this.$nextTick(function () {
        this.$refs.subDialog.clear()
      })
    }
  }
}
</script>

<style scoped>
@import "../../style/table.css";
</style>
